<template>
  <div class="header pt-[22px] pb-[22px] flex justify-between">
    <!-- 左 -->
    <div class="header-left ml-[80px] flex items-center">
      <!-- <img class="header-left-logo" src="@/assets/img/logo.png" /> -->
      <img class="block w-[54px]" alt="Vue logo" src="~@/assets/logo.png" />
      <span class="header-left-title font-bold text-[28px] ml-[8px]">{{
        title
      }}</span>
      <!-- 中 -->
      <div class="header-center flex items-center ml-[95px]">
        <div
          v-for="(item, index) in menuList"
          :key="index"
          class="header-center-ul-item pl-[25px] pr-[25px]"
        >
          <div
            class="header-center-ul-item-li"
            :class="
              activeMenuID === item.id ? 'header-center-ul-item-li-active' : ''
            "
            @click="handleClickTopMenu(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div class="header-right mr-[160px] flex items-center">
      <div class="header-right-item">欢迎您！{{ userName }}</div>
      <el-button size="small" type="primary">退出</el-button>
      <el-divider direction="vertical" />
      <el-select v-model="LanguageValue" size="small" style="width: 70px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const title = "安全中心";
const userName = "超级管理员";
let activeMenuID = ref(1);
const menuList = reactive([
  { id: 1, name: "首页", url: "/safeCenter/home" },
  { id: 2, name: "账户安全", url: "/safeCenter/accountSecurity" },
  { id: 3, name: "密码管理", url: "/safeCenter/passwordManagement" },
  { id: 4, name: "常见问题", url: "/safeCenter/faq" }
]);
let LanguageValue = ref("中文");
const options = reactive([
  { value: "中文", label: "中文" },
  { value: "英文", label: "英文" }
]);
const handleClickTopMenu = item => {
  activeMenuID.value = item.id;
  router.push({ path: item.url });
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  color: var(--color-header-text);
  background: var(--color-header-background);
  &-center {
    &-ul-item {
      &-li {
        color: var(--color-header-text-secondary);
        &-active {
          color: var(--color-header-text-active);
        }
        &:hover {
          color: var(--color-header-text-active);
          cursor: pointer;
        }
      }
    }
  }
}
</style>
